<div id="content_header">
  <h3>Credit Cards</h3>
</div>

<div class="row row-unstyled">
  <div class="col-md-12">
    <label>SEARCH</label>
  </div>
</div>

<div class="row">
  <div class="col-md-6 col-lg-4">
    <form class="form-vertical" ng-submit="false">
      <div class="input-group">
        <input class="form-control" type="text" name="keyword" placeholder="Type Name to search" ng-model="searchText.CityName">
        <span class="input-group-addon">Find!</span>
      </div>
    </form>
  </div>
  <div class="col-md-6 col-lg-4">
    <a ui-sref="^.new" class="btn btn-primary">Register a new Credit Card</a>
  </div>
</div>

<br>

<div class="row">
  <div class="col-md-12">
    <label>RESULTS</label>
    <div class="search-message">
      Found <span class="primary-color"><b>{{ creditcardtypes.length | filter:searchText }}</b></span> records
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <table class="table table-stripped table-bordered" ng-show="creditcardtypes.length > 0">
      <thead>
        <tr>
          <th>Credit Card Name</th>
          <th>Fee</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="creditcard in creditcardtypes | filter:searchText">
          <td>{{ creditcard.Name }}</td>
          <td>
            <b>{{ creditcard.CreditCardFees[0].Fee }}%</b> <small><a href ui-sref="^.edit({id: creditcard.Id})">change</a> - <a href ng-click="showHistory(creditcard.Id)">show history</a></small>
          </td>
          <td>
            <a class="" href="" ng-click="delete(creditcard.Id)"><i class="simple-icon-trash"></i></a>
            <a class="" ui-sref="^.show({id: creditcard.Id})"><i class="glyphicon glyphicon-edit"></i></a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<pageslide ps-speed="0.25" ps-auto-close="true" ps-open="psHistory">
  <div style="padding:20px">
    <h3>Fees History <a href="" ng-click="psHistory = !psHistory"><i class="simple-icon-close"></i></a></h3>
    <hr>
    <div>
      <dl ng-repeat="history in histories">
        <dt>{{ history.LastActive  | date:'medium' }}</dt>
        <dd><strong>Fee: </strong><small>{{ history.Fee }}%</small></dd>
      </dl>
    </div>
  </div>
</pageslide>